<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script src="../iscroll.js"></script>
      <script>
  $(function(){
    TagNav('#tagnav',{
        type: 'scrollToFirst',
    });
	  $('.weui_tab').tab({
    defaultIndex: 0,
    activeClass:'weui_bar_item_on',
    onToggle:function(index){
    if(index>0){
    alert(index)
    }
    }
});
	  
	  
	  
	   $('.searchbar_wrap').searchBar({
    cancelText:"取消",
    searchText:'关键字',
    onfocus: function (value) {
       
    },
    onblur:function(value) {

    },
    oninput: function(value) {

    },
    onsubmit:function(value){
    },
    oncancel:function(){

    },

    onclear:function(){

    }
});
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  });    
      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<div class="page-hd">
        <h1 class="page-hd-title">
            底部导航
        </h1>
        <p class="page-hd-desc">为了防止底部文字被挡住,需添加空行在导航上面,横向无限滚动需要加载iscroll.js</p>
    </div>
<div id="tagnav" class="weui-navigator weui-navigator-wrapper">
           <ul class="weui-navigator-list">
                <li><a href="javascript:;">首页</a></li>
                <li><a href="javascript:;">我爱中国</a></li>
                <li><a href="javascript:;">国内</a></li>
                <li><a href="javascript:;">国际</a></li>
                <li><a href="javascript:;">军事</a></li>
                <li><a href="javascript:;">社会</a></li>
                <li><a href="javascript:;">娱乐</a></li>
                <li><a href="javascript:;">女人</a></li>
                <li><a href="javascript:;">体育</a></li>
                <li><a href="javascript:;">科技</a></li>
                <li><a href="javascript:;">互联网</a></li>
                <li><a href="javascript:;">教育</a></li>
                <li><a href="javascript:;">财经</a></li>
                <li><a href="javascript:;">房产</a></li>
                <li><a href="javascript:;">汽车</a></li>
            </ul>
    </div>    
     <div class="searchbar_wrap">
</div>
 <div class="weui_cells_title" style="height:45px;">&nbsp;</div>    
<div class="weui_tab tab-bottom" >
                <div class="weui_tab_bd">
        <div class="weui_tab_bd_item">
            <h3>微信</h3>
        </div>
        <div class="weui_tab_bd_item">
            <h3>通讯录</h3>
        </div>
        <div class="weui_tab_bd_item">
            <h3>发现</h3>
        </div>
        <div class="weui_tab_bd_item">
            <h3>我</h3>
        </div>
              <div class="weui_tab_bd_item">
            <h3>设置</h3>
        </div>
    </div>
            <div class="weui_tabbar ">
                <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
                    <div class="weui_tabbar_icon">
                        <img src="../images/icon_nav_button.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">微信</p>
                </a>
                <a href="javascript:;" class="weui_tabbar_item">
                    <div class="weui_tabbar_icon">
                        <img src="../images/icon_nav_msg.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">通讯录</p>
                </a>
                <a href="javascript:;" class="weui_tabbar_item">
                    <div class="weui_tabbar_icon">
                        <img src="../images/icon_nav_article.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">发现</p>
                </a>
                <a href="javascript:;" class="weui_tabbar_item">
                    <div class="weui_tabbar_icon">
                        <img src="../images/icon_nav_cell.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">我</p>
                </a>
                  <a href="javascript:;" class="weui_tabbar_item">
                    <div class="weui_tabbar_icon">
                        <img src="../images/icon_nav_cell.png" alt="">
                    </div>
                    <p class="weui_tabbar_label">设置</p>
                </a>              
            </div>
        </div>
</body>
</html>
